<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:include="common">
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div class="panel-body">
  <div style="display:inline-block;">
    <div style="float:left;padding:6px;">
      <span>姓名：</span>
    </div>
    <div style="float:left;">
      <input id="userLogStartTime" type="date"  class="form-control" style="width:200px;" placeholder="请输入开始时间" />
    </div>
    <div style="float:left;">
      <input id="userLogEndTime" type="date" class="form-control" style="width:200px;" placeholder="请输入结束时间" />
    </div>

    <div style="float:left;">
      <input id="userName" class="form-control" style="width:200px;" placeholder="查询用户名字" />
    </div>
    <div style="float:left;">
      <input id="userOperate" class="form-control" style="width:200px;" placeholder="查询操作" />
    </div>
    <div style="float:left;margin-left:20px;">
      <button id="query" class="btn btn-primary">查询</button>
    </div>
  </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          &times;
        </button>
        <h4 class="modal-title" id="myModalLabel">
          查看订单详细
        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" id="myForm">
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">支付宝交易号</label>
            <div class="col-sm-10">
              <input type="hidden" class="form-control" name="id" >
              <input type="text" class="form-control" name="orderNum" >
            </div>
          </div>
          <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">商品名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="shopEntity">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">数量</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="shopCount">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">总价</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="shopTotal">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">实际总价格</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="realityShopTotal">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">购买用户id</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="buyUserId">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="buyUserName">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">联系人</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="contacts">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">电话</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="contactsPhone">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">下单时间</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="orderDate">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">付款时间</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="payDate">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">完成时间</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="finishDate">
            </div>
          </div>
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">订单状态</label>
            <div class="col-sm-10">
              <input type="radio" name="orderCondition" value="0">未支付
              <input type="radio" name="orderCondition" value="1">已支付
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<table id="userInfoTable"></table>

</body>
<script>
  $(function (){
    querylist();
  })
  function  querylist(){
    $("#userInfoTable").bootstrapTable({
      url:"../user/queryUserInfo", //user是映射的类，queryUserInfo,是映射的方法
      columns:[
        {checkbox: true,visible: true },//是否显示复选框
        {field:'id',title:'id',sortable:true},
        {
          field: 'userId', title: '用户ID', sortable: true,
          formatter: function (value, row, index) {

            //let time1 = Date.parse(new Date()); //1603009257000,精确到秒
           return row.userId;

          },
        },
        {field:'userName',title:'用户名字',sortable:true,
          formatter: function(value,row,index){
              return "<a href='javascript:getByUserId(\""+row.userId+"\")'>"+row.userName+"</a>";
          }
        },
        {field:'userNum',title:'用户账号',sortable:true},
        {field:'userOperate',title:'操作',sortable:true},
        {field:'userDate',title:'时间',sortable:true,},
        {field:'cz',title:'操作',sortable:true,sortable:true,
          formatter: function(value,row,index){
           var str="";
           str+="<a href='#' onclick='orderQuery("+row.userId+")'>详情</a>"
          //str='<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="orderQuery('+row.userId+')">详细</button>'
          return str;
          }
        },

      ],
      queryParams: function (params) {
        return {
          userLogStartTime: $('#userLogStartTime').val(),
          userLogEndTime: $('#userLogEndTime').val(),
          userName: $('#userName').val(),
          userOperate: $('#userOperate').val(),
        };
      },
      //开启分页以后，默认会传入两个参数,而这两个参数，直接是mysql的分页计算后的数据
      pagination:true,
      pageSize:2,
      pageList:[2,4,6,8,10],
      sidePagination : 'client',//server:服务器端分页{rows:[],total:10}|client：前端分页 [{},{}]
    })}

    //条查的按钮方法
  $('#query').click(function () {
    $('#userInfoTable').bootstrapTable('refresh')
  })
  

  //查看详情
  function orderQuery(id){
    $.ajax({
      url:"../user/queryOrderById",
      data:{id:id},
      success:function(data){
        for(var i in data){
          //		console.log(i);
          $("#myForm input").each(function(index,dom){
            if (i==$(dom).attr("name")) {
              $(dom).val(data[i])
            }
          })
        }
        $("input[value='"+data.orderCondition+"']").prop("checked",true);
      }
    })
  }
  

</script>
</html>